/*
 * @Author: your name
 * @Date: 2021-09-10 09:20:05
 * @LastEditTime: 2021-09-13 16:07:43
 * @LastEditors: Please set LastEditors
 * @Description: 666
 * @FilePath: \gitee-kubife\biaozhu_20210910\js\index.js
 */
(function(){
/* 画布... */
function BZ_Canvas(opt){
    var opt = opt || {};
    this.opt = $.extend({
        id:"",
        imageSrc:""
    },opt);
    // --- 画布宽度(默认屏幕宽)
    this.full_screen_width = opt.ww || window.innerWidth;
    // --- 画布高度(默认屏幕高)
    this.full_screen_height = opt.wh || window.innerHeight;
    // --- 要绘制的图片DOM
    this.image = null;
    // --- 图片的缩放比例(默认1)
    this.image_scale = 1;
    // --- 最小缩放比例1
    this.MININUM_SCALE = 1;
    // --- 画布的X轴坐标(默认左上角0)
    this.ctx_x = 0;
    // --- 画布的Y轴坐标(默认左上角0)
    this.ctx_y = 0;
    // --- 是否拖拽平移
    this.dragging = false;
    // --- 鼠标按下时的坐标信息
    this.image_md_pos = null;
    // --- 鼠标移动时的坐标信息
    this.image_mm_pos = null;
    // --- 鼠标抬起时的坐标信息
    this.image_mu_pos = null;
    if(opt.id){
        this.canvas = $(opt.id);
        this.ctx = this.canvas.get(0).getContext("2d");
        // --- 初始化
        this.init();
    }
}
BZ_Canvas.prototype = {
    constructor: BZ_Canvas,
    // --- 初始化
    init(){
        // --- 设置画布尺寸
        this.setSize();
        // ---
        this.windowToCanvas();
        // --- 加载图片
        this.loadImage();
        // --- canvas设置事件
        this.canvasEventsInit();
        // ---
        /* this.canvas.on("mousewheel",function(e){
            console.log("---mousewheel_e---",e);
        }); */
    },
    // --- 设置画布尺寸
    setSize(){
        this.canvas.css({
            position:"absolute",
            top:"0px",
            left:"0px"
        });
        this.canvas.attr(
            "width",this.full_screen_width
        ).attr(
            "height",this.full_screen_height
        );
    },
    // --- 坐标转换(获取画布左上角原点)
    windowToCanvas(x,y){
        var canvas = this.canvas.get(0);
        var box = canvas.getBoundingClientRect();
        //console.log("---box---",box);
        return {
            x: x - box.left - (box.width - canvas.width) / 2,
            y: y - box.top - (box.height - canvas.height) / 2
        };
    },
    // --- 加载图片
    loadImage(){
        var _this = this;
        this.image = new Image();
        this.image.src=this.opt.imageSrc;
        this.image.onload = function(){
            // --- 绘制图片到画布
            _this.drawImage();
        };
    },
    drawImage(){
        var _this = this;
        return $.Deferred(function(defer){
            /* // --- 根据画布和图片宽高比设置图片宽高
            var img_ow = _this.image.width,
                img_oh = _this.image.height;
                //draw_image_ow = ~~(_this.full_screen_width / 2),
                //draw_image_oh = ~~((draw_image_ow*img_oh)/img_ow);
            // console.log("---img_ow---",img_ow);
            // console.log("---img_oh---",img_oh);
            // console.log("---draw_image_ow---",draw_image_ow);
            // console.log("---draw_image_oh---",draw_image_oh);
            // ---
            _this.ctx.drawImage(
                _this.image,
                0,
                0,
                img_ow,
                img_oh,
                //~~(_this.full_screen_width / 2) - ~~(draw_image_ow / 2),
                //~~(_this.full_screen_height / 2) - ~~(draw_image_oh / 2),
                //draw_image_ow,
                //draw_image_oh
                _this.ctx_x,
                _this.ctx_y,
                img_ow*_this.image_scale,
                img_oh*_this.image_scale
            ); */
            _this.ctx.clearRect(
                0,
                0,
                _this.canvas.get(0).width,
                _this.canvas.get(0).height
            );
            // --- 保证ctx_x在 [ _this.image.width * ( 1 - _this.image_scale), 0]
            /* if( _this.ctx_x < _this.image.width * ( 1 - _this.image_scale) ){
                _this.ctx_x = _this.image.width * ( 1 - _this.image_scale);
            } else if ( _this.ctx_x > 0){
                _this.ctx_x = 0;
            }
            // --- 保证ctx_y在 [ _this.image.height * ( 1 - _this.image_scale), 0]
            if( _this.ctx_y < _this.image.height * ( 1 - _this.image_scale) ){
                _this.ctx_y = _this.image.height * ( 1 - _this.image_scale);
            } else if ( _this.ctx_y > 0 ) {
                _this.ctx_y = 0;
            } */
            console.log("---_this.ctx_x---",_this.ctx_x);
            console.log("---_this.ctx_y---",_this.ctx_y);
            // ----
            _this.ctx.drawImage(
                _this.image,
                0,
                0,
                _this.image.width,
                _this.image.height,
                _this.ctx_x,
                _this.ctx_y,
                _this.image.width * _this.image_scale,
                _this.image.height * _this.image_scale
            );
            defer.resolve();
        });
    },
    // --- canvas事件(mousedown、mousemove、mouseup、mousewheel)
    canvasEventsInit(){
        var _this = this;
        // --- 拖拽平移
        this.canvas.on("mousedown",function(ev){
            /* console.log(
                "---ev.clientX---",ev.clientX
            );
            console.log(
                "---ev.clientY---",ev.clientY
            );
            console.log(
                "---windowToCanvas---",
                _this.windowToCanvas(
                    ev.clientX,
                    ev.clientY
                )
            ); */
            _this.dragging = true;
            _this.image_md_pos = null;
            _this.image_md_pos = _this.windowToCanvas(
                ev.clientX,
                ev.clientY
            );

            _this.canvas.on("mousemove",function(ev){
                if(_this.dragging){
                    // ---
                    _this.image_mu_pos = null;
                    _this.image_mu_pos = _this.windowToCanvas(
                        ev.clientX,
                        ev.clientY
                    );
                    // ---
                    _this.ctx_x += _this.image_mu_pos.x - _this.image_md_pos.x;
                    _this.ctx_y += _this.image_mu_pos.y - _this.image_md_pos.y;
                    _this.image_md_pos = null;
                    _this.image_md_pos = _this.image_mu_pos;
                    // ---
                    _this.drawImage();
                }
            });

            _this.canvas.on("mouseup",function(ev){
                console.log("---_this.image_mu_pos---",_this.image_mu_pos);
                _this.canvas.off("mousemove");
                _this.dragging = false;
                _this.canvas.off("mouseup");
            });
        });
        // --- 鼠标滚轮缩放
        this.canvas.on("mousewheel wheel",function(ev){
            //console.log("---mousewheel wheel---",ev);
            var pos = _this.windowToCanvas(ev.clientX,ev.clientY);
            //console.log("---pos---",pos);
            var wheelDelta = ev.originalEvent.wheelDelta ? ev.originalEvent.wheelDelta : (ev.originalEvent.deltaY*(-40));
            //console.log("---wheelDelta---",wheelDelta);
            var newPos = {
                // x: ((pos.x - _this.ctx_x)/_this.image_scale).toFixed(2),
                // y: ((pos.y - _this.ctx_y)/_this.image_scale).toFixed(2)
                x: ((pos.x - _this.ctx_x)/_this.image_scale),
                y: ((pos.y - _this.ctx_y)/_this.image_scale)
            };
            //console.log("---newPos---",newPos);
            // --- 放大
            if( wheelDelta > 0 ){
                _this.image_scale+=0.1;
            }
            // --- 缩小
            if( wheelDelta < 0 ){
                _this.image_scale-=0.1;
                if(_this.image_scale<_this.MININUM_SCALE){
                    _this.image_scale = _this.MININUM_SCALE;
                }
            }
            _this.ctx_x = ( 1 - _this.image_scale )*newPos.x + ( pos.x - newPos.x );
            _this.ctx_x = ~~(_this.ctx_x);
            _this.ctx_y = ( 1 - _this.image_scale )*newPos.y + ( pos.y - newPos.y );
            _this.ctx_y = ~~(_this.ctx_y);
            // ---
            _this.drawImage();
        });
    }
};
/*  */
$.when($.ready).done(function(){
    // --- 画布...
    window.BZC = new BZ_Canvas({
        id:"#test_bz_canvas",
        imageSrc:"./images/test.jpg"
    });
    //console.log("---BZ_Canvas---",BZC);
});
/*  */
})();
